import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Modal, Form, Icon, Input, Button, Checkbox } from 'antd';
import { SelectCategory } from '../../components/SelectCategory';

const FormItem = Form.Item;

@connect(({ category, loading }) => ({
	category,
	loading: loading.models.category,
}))
@Form.create()
export default class Edit extends PureComponent {

	constructor(props) {
		super(props);
	}

	componentDidMount() {
	}

	hideModal = () => {
		const { dispatch } = this.props;
		dispatch({
			type: 'category/closeEdit'
		})
		this.props.form.resetFields();
	}

	saveForm(values) {
		const { dispatch } = this.props;
		dispatch({
			type: 'category/saveCategory',
			payload: values
		})
	}

	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				console.log('Received values of form: ', values);
				this.saveForm(values);
			}
		});
	}

	render() {
		const { visible, title } = this.props;
		let { item } = this.props.category;
		const { getFieldDecorator } = this.props.form;

		return (<Modal
			title={title}
			footer={null}
			visible={visible}
			onCancel={this.hideModal}
		>

			<Form onSubmit={this.handleSubmit} className="login-form">
				<FormItem
					label="父级分类:"
				>
					{getFieldDecorator('name', {
						initialValue: item.name,
						rules: [{ required: true, message: 'Please input your username!' }],
					})(
						<SelectCategory></SelectCategory>
					)}
				</FormItem>
				<FormItem
					label="名称:"
				>
					{getFieldDecorator('name', {
						initialValue: item.name,
						rules: [{ required: true, message: 'Please input your username!' }],
					})(
						<Input placeholder="名称" />
					)}
				</FormItem>
				<FormItem
					label="模型:"
				>
					{getFieldDecorator('module', {
						rules: [{ required: true, message: 'Please input your Password!' }],
					})(
						<Input type="password" placeholder="模型" />
					)}
				</FormItem>
				<FormItem
					label="描述:"
				>
					{getFieldDecorator('summary', {
						rules: [{ required: true, message: 'Please input your Password!' }],
					})(
						<Input type="password" placeholder="描述" />
					)}
				</FormItem>
				<FormItem>
					{getFieldDecorator('isshow', {
						valuePropName: 'checked',
						initialValue: true,
					})(
						<Checkbox>展示</Checkbox>
					)}
				</FormItem>
				<FormItem>
					<Button type="primary" htmlType="submit" className="login-form-button">
						保存
                              </Button>
				</FormItem>
			</Form>
		</Modal>);
	}
}
